<template>
    <div class="fav-container">
        <div class="title">收藏的漫画：{{ comics.total }}</div>

        <long-list v-for="item in comics.message" :message="item" :key="item.id"></long-list>
        <div class="btn-container">
            <van-pagination v-model="comics.page" :page-count="comics.pages" :items-per-page="3" @change="changePage">
                <template #page="{ text }">{{ text }}</template>
            </van-pagination>
        </div>
        <div style="height: 200px"></div>
    </div>
    <van-overlay v-model:show="showToast">
        <loading-box>转呀转呀转呀转...</loading-box>
    </van-overlay>
</template>

<script>
import {onMounted, ref, reactive} from "vue";
import {_getMyFav} from "@/apis/mainPageAPI";
import longList from "@/components/main/part/longList";

export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "fav",
    components: {
        longList
    },
    setup() {
        let showToast = ref(true)

        let index = 1;
        let isShowNextBtn = ref(true)
        let comics = reactive({
            message: [],
            total: '',
            limit: '',
            pages:'',
            page:''
        })

        async function getMyFav(page) {
            showToast.value = true
            const data = {
                page
            }
            await _getMyFav(data,res => {
                if (res.data.message == "success") {
                    comics.pages = res.data.data.comics.pages
                    comics.page = res.data.data.comics.page
                    comics.message = res.data.data.comics.docs;
                    comics.total = res.data.data.comics.total
                    comics.limit = res.data.data.comics.limit
                    window.scrollTo(0, 0);
                    showToast.value = false
                }
            },()=>{
                alert('获取失败')
                showToast.value = false
            })
        }

        async function changePage() {
            await getMyFav(comics.page)
        }

        onMounted(async () => {
            await getMyFav(index)
        })

        return {
            showToast,
            comics,
            changePage,
            isShowNextBtn,
        }
    }
}
</script>

<style scoped>

.fav-container {
    width: 100%;
    background-color: #e1e1e1;
}

.btn-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    margin: 10px;
    font-size: 40px;
    color: #f1929d;
}
</style>